<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
    <script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="forms.js"></script>
<link rel="stylesheet" type="text/css" href="forms.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Forms</h1>
<p>The js is not minified so it is readable. See <a href="forms.js">forms.js</a>.</p>

<form id="form1" class="x-form">
    <div style="width:400px;">
        <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
        <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
            <h3 style="margin-bottom:5px;">Ext Live Forms</h3>
            <!-- begin form layout -->
            <div class="x-form-bd" id="container">
                <fieldset>
                    <legend>ComboBox Fields</legend>

                    <div class="x-form-item">
                        <label for="combo-local">Local Data:</label>
                        <div class="x-form-element">
                            <input type="text" size="20" name="combo-local" id="combo-local" />
                        </div>
                    </div>
                    
                    <div class="x-form-item">
                        <label for="combo-ajax">Ajax Data:</label>
                        <div class="x-form-element">
                            <input type="text" size="20" name="combo-ajax" id="combo-ajax" />
                        </div>
                    </div>

                    <div class="x-form-item">
                        <label for="combo-selection">Only Selection:</label>
                        <div class="x-form-element">
                            <input type="text" size="20" value="OH" name="combo-selection" id="combo-selection" />
                        </div>
                    </div>

                    <div class="x-form-item">
                        <label for="combo-tpl">Item Templates:</label>
                        <div class="x-form-element">
                            <input type="text" size="20" name="combo-tpl" id="combo-tpl" />
                        </div>
                    </div>

                    <div class="x-form-item">
                        <label for="combo-tpl">Unobtrusive:</label>
                        <div class="x-form-element">
                            <select name="light" id="light">
                                <option value="Shade">Shade</option>
                                <option value="Mostly Shady">Mostly Shady</option>
                                <option value="Sun or Shade">Sun or Shade</option>

                                <option value="Mostly Sunny">Mostly Sunny</option>

                                <option value="Sunny">Sunny</option>
                            </select>
                        </div>
                    </div>

                </fieldset>

                <fieldset>
                    <legend>Component Fields</legend>

                    <div class="x-form-item">
                        <label for="markup-date">Date:</label>
                        <div class="x-form-element">
                            <input type="text" size="10" value="03/08/03" name="markup-date" id="markup-date" />
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <legend>Live Validation and key filtering</legend>

                    <div class="x-form-item">
                        <label for="required">Required:</label>
                        <div class="x-form-element">
                            <input type="text" size="24" name="required" id="required" />
                        </div>
                    </div>

                    <div class="x-form-item">
                        <label for="alpha">Alpha:</label>
                        <div class="x-form-element">
                            <input type="text" size="24" name="alpha" id="alpha" />
                        </div>
                    </div>

                    <div class="x-form-item">
                        <label for="alpha2">(No Filter):</label>
                        <div class="x-form-element">
                            <input type="text" size="24" name="alpha2" id="alpha2" />
                        </div>
                    </div>

                    <div class="x-form-item">
                        <label for="alphanum">Alphanum:</label>
                        <div class="x-form-element">
                            <input type="text" size="24" name="alphanum" id="alphanum" />
                        </div>
                    </div>

                    <div class="x-form-item">
                        <label for="email">Email:</label>
                        <div class="x-form-element">
                            <input type="text" size="32" name="email" id="email" />
                        </div>
                    </div>

                    <div class="x-form-item">
                        <label for="url">URL:</label>
                        <div class="x-form-element">
                            <input type="text" size="32" name="url" id="url" />
                        </div>
                    </div>

                    <div class="x-form-item">
                        <label for="url">Auto grow textareas:</label>
                        <div class="x-form-element">
                            <textarea name="grow" id="grow" cols="25" rows="3"></textarea>
                        </div>
                    </div>
                </fieldset>
            </div>
            <!-- end form layout -->
        </div></div></div>
        <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
    </div>
</form>
</body>
</html>
